<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="integralDetail">
      <xlNavBar :isShare="isShare" title="积分明细" bgc="ff9d49"></xlNavBar>
      <div class="tabs_wrap">
        <div class="tabs">
          <div
            class="item"
            :class="[tabIndex == index ? 'active' : '']"
            :key="index"
            @click="clickTabItem(item, index)"
            v-for="(item, index) in tabList"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="line" :class="['i' + tabIndex]"></div>
      </div>

      <div class="list_wrap">
        <div class="list"></div>
        <u-list class="list" @scrolltolower="scrolltolower">
          <u-list-item v-for="(item, index) in list" :key="index">
            <div class="item">
              <div class="left">
                <div class="title">{{ item.info || "" }}</div>
                <div class="date">{{ item["date"] }}</div>
              </div>
              <div
                class="right positive"
                :class="[item['integral'] < 0 ? 'red' : '']"
              >
                {{
                  item["integral"] > 0
                    ? "+" + item["integral"]
                    : item["integral"]
                }}
              </div>
            </div>
          </u-list-item>
        </u-list>
      </div>
    </div>
  </page-meta>
</template>

<script>
export default {
  components: {},
  name: "integralDetail",
  data() {
    return {
      isShare: 0,
      fontsize: "",
      list: [],
      showIosPopup: false,
      tabIndex: 0,
      tabList: [
        {
          name: "全部记录",
          type: "0"
        },
        {
          name: "积分收入",
          type: "1"
        },
        {
          name: "积分支出",
          type: "2"
        }
      ],
      params: {
        type: 0,
        pageSize: 10,
        pageNum: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    scrolltolower(data) {
      console.log(data);
    },
    clickTabItem(item, index) {
      this.params.type = item.type;
      this.tabIndex = index;
      this.list = [];
      this.getList();
    },
    async getList() {
      let res = await this.$http.requestSync(
        "/bills/list/" + this.params.type,
        this.params
      );
      try {
        if (res.code == 200 && res.bills) {
          this.list = [...this.list, ...res.bills];
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize((res) => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.integralDetail {
}
.red {
  color: #f76a6a !important;
}
.tabs_wrap {
  position: sticky;
  top: 60px;
  background: #ffffff;
  z-index: 99999;
  .tabs {
    display: flex;
    justify-content: space-around;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    font-family: PingFang SC-常规体, PingFang SC;
    font-weight: normal;
    color: #666666;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    .active {
      font-size: 14px;
      font-family: PingFangSC-Semibold-Regular, PingFangSC-Semibold;
      font-weight: 400;
      color: #333333;
    }
    .item {
      width: 100px;
      background-color: #fff;
    }
  }
  .line {
    width: 24px;
    height: 4px;
    background: #ff8822;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    transition: all 0.3s;
  }
  .i0 {
    transform: translateX(70px);
  }
  .i1 {
    transform: translateX(195px);
  }
  .i2 {
    transform: translateX(315px);
  }
}
.list_wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .list,
  .u-list {
    .item,
    .u-list-item {
      display: flex;
      height: 69px;
      align-items: center;
      justify-content: space-between;
      .left {
        .title {
          font-size: 16px;
          font-family: PingFangSC-Semibold-Regular, PingFangSC-Semibold;
          font-weight: 400;
          color: #333333;
        }
        .date {
          font-size: 13px;
          font-family: PingFang SC-常规体, PingFang SC;
          font-weight: normal;
          color: #999999;
          margin-top: 8px;
        }
      }
      .right {
        font-size: 22px;
        font-family: PingFangSC-Semibold-Regular, PingFangSC-Semibold;
        font-weight: 400;
      }
      .positive {
        color: #ff8822;
      }
      .minus {
        color: #f76a6a;
      }
    }
  }
}
</style>
